<template>
	<div class="withdrawals">
		<div class="header">
			<img @click="back" src="../../assets/nav_back.png"/>
			<span>账户提现</span>
			<span class="img"></span>
		</div>	
		<div class="inner" >
			<span>账户余额</span>
			<p><span>{{userMoney}}</span>元</p>
		</div>
		
		<div class="inner" >
			<span style="width: 1.8rem;">提现金额</span>
			<input type="text" placeholder="最低100起提，每日提现3次" v-model="money"/>
		</div>
		<p>提现银行卡</p>
		<div class="inner" style="margin-top: 0;" @click="model" >
			<span style="line-height: 0.84rem;"><img style="vertical-align:middle; margin-right: 0.2667rem; width: 0.64rem; height: 0.64rem;"  :src="banImg(data.bankCode)"/>{{data.bankName}} 尾号  {{data.bankNo | codeTo4 }}</span>
			<img src="../../assets/arrow_right.png"/>
		</div>
		<div class="inner" style="margin-bottom: 1.253333rem;" >
			<span>提现密码</span>
			<input type="password" name="" id="" value="" style="width:.5rem"  v-model="pwd"/>
			<p style="font-size: 0.37333rem; color: #fffc25;" @click="findWithdrawals">忘记密码？</p>
		</div>
		<v-button buttonText='确认提现' :isActive='isActive' topNum='0.8rem' @toNext='login'></v-button>
		<!--模态框-->
		<div class="model" v-show="flag" >
			 <div class="model-inner">
			 	<div  class="model-inner2" >
			 		<div class="model-header">选择我的银行卡</div>
				 	<div class="card" v-for="item in bankList" @click="getMess(item)">
				 		<img :src="banImg(item.bankCode)"/>
				 		<p><span class="name">{{item.bankName}}</span><span>{{item.bankNo}}</span></p>
				 	</div>
				 	<div class="card" style="height: 1.653rem;" @click="addCard">
				 		<img src="../../assets/select_card_add.png"/>
				 		<p>
				 			<span class="name">添加银行卡</span>
				 		</p>
				 	</div>
				 	<div class="model-footer" @click="hidden">
				 		取消
				 	</div>
			 		
			 	</div>
			 	
			 	
			 </div>
		</div>
		
	</div>
</template>

<script>
	import my from '@/api/my/index'
	import { toast,Money,setwithdrawalPwd} from '@/util/index'
	import Button from '@/components/Button'
	import { Toast,MessageBox} from 'mint-ui'
	export default{
		data(){
			return{
				money:"",
				flag:false,
				bankImg:require("../../assets/withdraw_icon_ABOC.png"),
				bankName:"农业银行",
				bankNum:"345456457577346546",
				userMoney:"",
				pwd:"",
				bankList:[],
				data:""
				
			}
		},
		computed: {
			isActive() {
				if (Money(this.money)&&setwithdrawalPwd(this.pwd)) {
					return true
				} else {
					return false
				}
			},
			getUserData() {
			    return this.userMoney=	this.$store.state.money;
			}
		},
		methods:{
			getMess(val){
				this.data=val;
				this.flag=!this.flag; 
			},
			back(){
			    this.$router.back(-1);
			},
			model(){
				this.flag = true;
				
			},
			hidden(){
				this.flag=!this.flag; 
			},
			addCard(){
				this.$router.push({path:'/addCard'})
			},
			findWithdrawals(){
				this.$router.push({path:'/findWithdrawals'})
			},
			login(){
				if(this.isActive) {
					
					let encrypt = new JSEncrypt();
					encrypt.setPublicKey(this.$store.state.commonkey);
					let senddata = {
				    	userId:window.localStorage.getItem("token"),
				    	branch:this.data.branch,
				    	bankName:this.data.bankName,
				    	accountName:this.data.userName,
				    	bankNo:this.data.bankNo,
				    	payPwd:encrypt.encrypt(this.pwd),
				    	code:this.data.bankCode,
				    	totalAmount:this.money,
				    	plat:"mlj"
				    }
					my.applyCash(senddata).then((res) => {
						if (res.data.code == 200) {
								let instance = Toast(res.data.message);
								instance.className="dd";
								setTimeout(() => {
								  instance.close();
								  this.$router.push({path:'/my'});
								}, 2000);
						} else {
							toast(res.data.message)
						}
					})
					
				}
				
			},
			banImg(num){
				if(num=="CCB"){
					return require("../../assets/Banklogo/bank7.png")
				}else if(num=="CMB"){
					return require("../../assets/Banklogo/bank10.png")
				}else if(num=="PSBC"){
					return require("../../assets/Banklogo/bank11.png")
				}else if(num=="BOCOM"){
					return require("../../assets/Banklogo/bank4.png")
				}else if(num=="CITIC"){
					return require("../../assets/Banklogo/bank17.png")
				}else if(num=="CIB"){
					return require("../../assets/Banklogo/bank13.png")
				}else if(num=="SPDB"){
					return require("../../assets/Banklogo/bank8.png")
				}else if(num=="GDB"){
					return require("../../assets/Banklogo/bank5.png")
				}else if(num=="ABC"){
					return require("../../assets/Banklogo/bank3.png")
				}else if(num=="ICBC"){
					return require("../../assets/Banklogo/bank2.png")
				}else if(num=="BOC"){
					return require("../../assets/Banklogo/bank1.png")
				}else if(num=="CEB"){
					return require("../../assets/Banklogo/bank19.png")
				}else{
					return require("../../assets/Banklogo/bank0.png")
				}
			},
			
			
			checkCash(){
				let senddata = {
			    	userId:window.localStorage.getItem("token"),
			    	plat:"mlj"
			    	
			    }
				my.checkCash(senddata).then((res) => {
					if (res.data.code == 200) {
							this.bankList=res.data.data;
							this.data=res.data.data[0];
					}else if(res.data.code == 101){
						   MessageBox.alert('请先设置提现密码',"").then(()=> {
							  	this.$router.push({path:'/findWithdrawals'})
							})
						  
					}else if(res.data.code == 103){
							 MessageBox.alert('请先实名认证',"").then(()=> {
							 	this.$router.push({path:'/realnameInfo'});
							});
					}else if(res.data.code==222){
			            this.$router.push({path:'/login'})
			        } else {
						toast(res.data.message)
					}
				})
				
			}
		},
		filters:{
			codeTo4(val){
				if(val){
					var a= val+"";
					return  a.slice(-4);
				}else{
					return "";
				}
				
			}
		},
		components: {
			'v-button': Button
		},
		mounted(){
			this.checkCash();
		},
		
		watch: {
		  getUserData(val) {
		    this.userMoney = val;
		  }
		},
		beforeRouteEnter(to,from,next){
		    document.querySelector('title').innerText='谋略家'
		    next()
		}
		
	}
	
</script>

<style lang="less" scoped>
@import '../../less/config.less';
.withdrawals{
	color:white;
	.header{
		padding:0 @p30;
		display: flex;
		justify-content:space-between;
		align-items: center;
		height:@hwrap;
		color:#fff;
		font-size:.48rem;
		img,.img{
			width: @p30;
			height: @p30;
		}
	}
	.inner{
		margin-top: @fsize;
		background: #141723;
		padding:0 @p30;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1.17333rem;
		img{
			width: 0.64rem;
			height: 0.64rem;
		}
		input{
			flex: 1;
			font-size: @f32;
			color: white;
		}
		span{
			font-size:@f32;	
			margin-right: 1rem;
			
		}
		p{
			font-size: @f32;
			padding:0px;
			color:white;
			span{
				margin-right: .3rem;
				font-weight: bold;
			}
		}
	}
	p{
		padding:0 @p30;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 1.36rem;
		color: @Color;
		font-size: @f32;
	}
	.login{
		
		width: 9.2rem;
		height: 1.17333rem;
		line-height: 1.17333rem;
		text-align: center;
		color: @Color;
		border: 2px @Color solid;
		margin: 0 auto;
		font-size: 0.48rem;
		border-radius: 0.08rem;
		
	}
	.model{
		top: 0;
		left: 0;
		position: absolute;
		width:100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.model-inner{
			width: 7.2rem;
			height: 5.94666rem;
			background: white;
			border-radius: 15px;
			overflow-y: scroll;
			.model-inner2{
				.model-header{
					height: 1.36rem;
					color: #333;
					font-size: @f34;
					text-align: center;
					line-height: 1.36rem;
				}
				.card{
					
					height: 1.76rem;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border-top: 1px solid #ddd;
					img{
						display: block;
						margin: 0 @p30;
						width: 0.64rem;
						height: 0.64rem;
					}
					p{
						height: 1.76rem;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						color: #333;
						font-size: @f24;
						.name{
							font-size: @f34;
						}
					}
				}
				.model-footer{
					height: 1.173333rem;
					line-height: 1.173333rem;
					color: #037bff;
					font-size: @f34;
					text-align: center;
					border-top: 1px solid #ddd;
				}
			}
		}
	}
}

</style>